<template>
    <wd-navbar :custom-style="!showAllCity ? 'background-color: transparent;' : '#fff'" ref="navBarRef" fixed
        :placeholder="false" title="Navbar 导航条" :bordered="false" zIndex="9999" left-arrow safeAreaInsetTop>
        <template #left>
            <view class="city" @click="showAll">
                <view class="city-name">{{ selectCity }}</view>
                <wd-transition :show="show" name="zoom-in" v-if="!showAllCity">
                    <wd-icon name="arrow-down" size="22px" color="#4a4a4a"></wd-icon>
                </wd-transition>
                <wd-transition :show="show" name="zoom-in" v-else>
                    <wd-icon name="arrow-up" size="22px" color="#4a4a4a"></wd-icon>
                </wd-transition>
            </view>
        </template>
        <template #title>
            <view class="search-box">
                <uni-search-bar style="width: 50%;" v-model="stationName" cancelButton="none" bgColor="#fbfbfb"
                    placeholder="搜索附近的换电站" @confirm="search">
                    <uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
                </uni-search-bar>
            </view>
        </template>
    </wd-navbar>
    <wd-popup v-model="showAllCity" position="top" :close-on-click-modal="true" :closable="false">
        <view class="top-pop" :style="{ marginTop: navBarHeight + 'px' }">
            <SelectCity @changeCity="changeCity" :position="position" />
        </view>
    </wd-popup>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import SelectCity from '../selectCity/SelectCity.vue';

defineOptions({
    options: {
        styleIsolation: 'shared'
    }
})

const emits = defineEmits(['search', 'show'])
let showCon = ref(true)
const showAll = () => {
    showAllCity.value = !showAllCity.value
    showCon.value = !showCon.value
    emits('show', showCon.value)
}

const stationName = ref('')
const search = () => {
    emits('search', { stationName: stationName.value })
}

const props = defineProps({
    position: {
        type: Object,
        default: () => { }
    }
})

const show = ref(true)
const selectCity = ref('定位中')
const showAllCity = ref(false)

// 选择城市
const changeCity = (city) => {
    selectCity.value = city.city
    showAllCity.value = false
    emits('search', { city })
}

// 获取navBar高度
const navBarRef = ref(null);
const getNavBarHeight = (navBarRef) => {
    return new Promise((resolve, reject) => {
        if (!navBarRef.value) {
            reject("导航栏 ref 未绑定");
            return;
        }
        const query = uni.createSelectorQuery().in(navBarRef.value.$);
        query
            .select(".wd-navbar")
            .boundingClientRect((rect) => {
                if (rect) {
                    resolve(rect.height);
                } else {
                    reject("无法获取导航栏高度");
                }
            })
            .exec();
    });
};

const navBarHeight = ref(0);

onMounted(async () => {
    try {
        const height = await getNavBarHeight(navBarRef);
        navBarHeight.value = height;
    } catch (err) {
        console.error(err);
    }
    setSelectCity()
});

let position = ref({})
const setSelectCity = () => {
    if (props.position.addressName) {
        selectCity.value = props.position.addressName
        position.value = props.position
    }
}

watch(() => props.position, (newVal) => {
    setSelectCity()
}, { deep: true })

</script>

<style lang="scss" scoped>
.city {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .city-name {
        color: #4a4a4a;
    }
}

.top-pop {
    z-index: 10000;
    /* 确保高于其他元素 */
    box-sizing: border-box;
    height: 100vh;
    /* 使用视口高度百分比 */
    max-height: none;
    /* 移除最大高度限制 */
    overflow: hidden;
    /* 确保内部滚动 */
}

.search-box {
    margin-left: 15rpx;
}
</style>

<style lang="scss">
:deep(.uni-searchbar) {
    padding: 0 !important;
    text-align: left !important;
    width: 85% !important;
}
</style>